<template>
  <div style="margin:0px 20px">
    <h1>成果详情</h1>
    <el-tabs type="border-card" :style="{width: '99%'}">
      <el-tab-pane label="基本信息" name="first" >
        <h1 class="h-title">基本信息</h1>
        <a class='pdf-download' style="margin:20px 40px" :href="infoObj.pdfUrl.url" target="_blank">全文pdf预览</a>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>专利名称：</span>
            <span class='info-pre'>{{infoObj.scientificName}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>申请(专利)号：</span>
            <span class='info-data'>{{infoObj.patentNo}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>申请日：</span>
            <span class='info-data'>{{infoObj.applicationDate}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>申请人：</span>
            <span class='info-data'>{{infoObj.applicantName}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>发明人：</span>
            <span class='info-data'>{{infoObj.inventorName}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>公开号：</span>
            <span class='info-data'>{{infoObj.publicNumber}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>代理人：</span>
            <span class='info-data'>{{infoObj.agentName}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>代理机构：</span>
            <span class='info-data'>{{infoObj.agency}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content' v-if="infoObj.publicDate != null">
            <span class='info-pre'>公开日：</span>
            <span class='info-data'>{{infoObj.publicDate}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>分类号：</span>
            <span class='info-data'>{{infoObj.ipcType}}</span>
          </div>
        </div>
        <div class='data-info'>
          <div class='info-content'>
            <span class='info-pre'>价值评级：</span>
            <el-tag :type="infoObj.evaluateLeval.type">{{infoObj.evaluateLeval.label}}</el-tag>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="摘要信息" name="second">
        <h1 class="h-title">摘要信息</h1>
        <span class='info-pre'>摘要:</span>
        <span class='info-data'>{{infoObj.summaryInfo}}</span>
      </el-tab-pane>
      <el-tab-pane label="摘要图片" name="third">
        <h1 class="h-title">摘要图片</h1>
        <div style="text-align: center"> 
           <div v-for="pic in infoObj.summaryPicture" :key="pic.url">
            <img :src="pic.url" style="maring: 20px 0px" :alt="pic.name">
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="权利要求" name="fourth">
        <h1 class="h-title">权利要求</h1>
        <span class='info-pre'>权利要求:</span>
        <span class='info-data'>{{infoObj.claim}}</span>
      </el-tab-pane>
      <el-tab-pane label="说明书" name="fifth">
        <h1 class="h-title">说明书</h1>
        <span class='info-pre'>说明书</span>
        <span class='info-data'>{{infoObj.specification}}</span>
      </el-tab-pane>
      <el-tab-pane label="评估过程" name="sixth">
        <h1 class="h-title">评估过程</h1>
        <div style="text-align: center">
          <el-table
          :data="evalList"
          style="width: 100%"
          height="600px">
            <el-table-column
              fixed
              prop="evalLevel.label"
              label="评估等级"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="evalStatus.label"
              label="评估状态"
              width="120">
            </el-table-column>
            <el-table-column
              prop="evalRemark"
              label="评估意见"
              width="240">
            </el-table-column>
            <el-table-column
              prop="evalTime"
              label="评估时间"
              width="120"
              :formatter="dateFormatter">
            </el-table-column>
            <el-table-column
              prop="evalUser"
              label="评估专家"
              width="300">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getScientificInfo,getSciEvalList } from "@/api/tcsp/scientificInfo";


export default {
  name: "scientificInfoDetail",
  dicts: ['tcsp_scientific_level', 'tcsp_scientific_ipctype', 'tcsp_scientific_status'],
  data() {
    return {
      loading: true,
      infoObj: {
      },  //一个空对象 -- 存储查询结果
      evalList: []
    }
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      const scienId = this.$route.params && this.$route.params.scienId;
      getScientificInfo(scienId).then(response =>{
        this.infoObj = response.data;
        //评估价值需要初始化
        this.dict.type.tcsp_scientific_level.forEach(e => {
          if (e.value == this.infoObj.evaluateLeval) {
            this.infoObj.evaluateLeval = e;
            this.infoObj.evaluateLeval.type='';
          }
        })
        console.log(this.infoObj);
      })
      getSciEvalList(scienId).then(resp =>{
        this.evalList = resp.data;
        //评估等级和评估状态，需要进行初始化
        this.evalList.forEach(element => {
          this.dict.type.tcsp_scientific_status.forEach(e =>{
            if (e.value == element.evalStatus) {
              element.evalStatus = e;
              if (e.value == '0') {
                //失效
                element.evalStatus.type= 'warning'
              } else if (e.value == '1') {
                //有效
                element.evalStatus.type='success'
              } else if (e.valid == '2') {
                //再审
                element.evalStatus.type =''
              } else if (e.value == '3') {
                //其他
                element.evalStatus.type ='info'
              }
            }
          })
          this.dict.type.tcsp_scientific_level.forEach(e =>{
            //评估等级
            if (e.value == element.evalLevel) {
              element.evalLevel = e;
            }
          })
        });
      })
    },
    dateFormatter(row, column, cellValue) {
      const date = new Date(cellValue);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
    
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
.data-info {
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 16px;
    position: relative;
    box-sizing: border-box;
    margin-left: -5px;
    margin-right: -5px;
}
.info-content {
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 16px;
    float: left;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 10px;
    word-break: break-all;
    padding-left: 5px;
    padding-right: 5px;
}
.info-data {
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 16px;
    word-break: break-all;
}
.info-pre {
    --mainColor: #213774;
    --systemColor: #213774;
    --hoverBorColor: #dbe4f4;
    --listBgColor: #fff;
    --titleColor: #000;
    --textColor: #727272;
    --greyColor: #adadad;
    --greyBorColor: #979797;
    --hoverBgColor: #265fbe;
    --homebgColor: #dbe4f4;
    --listItemBgColor: #e5effe;
    --listItemShadow: #dbe4f4;
    --color: #125840;
    --homeBg: #f0f2f5;
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    word-break: break-all;
    font-size: 16px;
    font-weight: bold;
    color: rgb(0, 0, 0);
}
.h-title {
    --mainColor: #213774;
    --systemColor: #213774;
    --hoverBorColor: #dbe4f4;
    --listBgColor: #fff;
    --titleColor: #000;
    --textColor: #727272;
    --greyColor: #adadad;
    --greyBorColor: #979797;
    --hoverBgColor: #265fbe;
    --homebgColor: #dbe4f4;
    --listItemBgColor: #e5effe;
    --listItemShadow: #dbe4f4;
    --color: #125840;
    --homeBg: #f0f2f5;
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    cursor: default;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 10px 0;
    margin-bottom: 22px;
    border-left: 3px solid var(--mainColor);
    font-size: 18px;
    font-weight: 500;
}
.pdf-download {
    --mainColor: #213774;
    --systemColor: #213774;
    --hoverBorColor: #dbe4f4;
    --listBgColor: #fff;
    --titleColor: #000;
    --textColor: #727272;
    --greyColor: #adadad;
    --greyBorColor: #979797;
    --hoverBgColor: #265fbe;
    --homebgColor: #dbe4f4;
    --listItemBgColor: #e5effe;
    --listItemShadow: #dbe4f4;
    --color: #125840;
    --homeBg: #f0f2f5;
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    overflow: visible;
    text-transform: none;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 4px;
    border: none;
    background-color: var(--mainColor)!important;
    z-index: 1;
    font-size: 14px;
    width: 120px;
    height: 36px;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
}


</style>
